<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../public/css/reset.css">
  <title>矩阵变换</title>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script type="module">
    const canvas = document.getElementById('canvas');
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    const ctx = canvas.getContext('2d');
    // 矩形一
    ctx.save()
    // 移动 x=200 y=100
    ctx.translate(200, 100)
    // 旋转30度
    ctx.rotate(Math.PI / 6)
    // 缩放 x=1 y=2
    ctx.scale(1, 2)
    ctx.fillRect(0, 0, 200, 100)
    ctx.restore()

    // 矩形二
    ctx.save()
    ctx.fillStyle = '#00acec'
    // 移动 x=200 y=100
    ctx.translate(200, 100)
    // 缩放 x=1 y=2
    ctx.scale(1, 2)
    // 旋转30度
    ctx.rotate(Math.PI / 6)
    ctx.fillRect(0, 0, 200, 100)
    ctx.restore()

    const ang = Math.PI / 6
    const [s, c] = [Math.sin(ang), Math.cos(ang)]

    // 矩形三
    {
      const m = [
        c, -2 * s, 0,
        s, 2 * c, 0,
        0, 0, 1,
      ]
      ctx.save()
      ctx.fillStyle = 'green'
      ctx.transform(
        // 第一列
        m[0], m[3],
        // 第二列
        m[1], m[4],
        // 第三列 位移量
        200, 100,
      )
      ctx.fillRect(0, 0, 200, 100)
      ctx.restore()
    }



    // 矩形四
    {
      const m1 = [
        c, -s, 0,
        2 * s, 2 * c, 0,
        0, 0, 1
      ]
      ctx.save()
      ctx.fillStyle = 'yellow'
      ctx.transform(
        // 第一列
        m1[0], m1[3],
        // 第二列
        m1[1], m1[4],
        // 第三列 位移量
        200, 100,
      )
      ctx.fillRect(0, 0, 200, 100)
      ctx.restore()
    }
  </script>
</body>

</html>
